<template>
    <div>

        <van-nav-bar
                title="不凡"
                left-text="返回"
                @click-left="onClickLeft"
                />
    
        
       <form action="/">
                <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @input="onSearch"
                   
                />
                <ul class="helpsch" v-if="res">
                    <li v-for="item in helpsch" :key="item.id" @click="goodsmead(item)">{{item.name}}</li>
                </ul>
    
                <div class="history">
                            <div class="t">
                                    <span>历史记录</span>
                                    <span></span>
                            </div>        
                              <div class="b" v-for="item in historyData" :key="item.id">
                                   {{item.keyword}}
                            </div>
                </div>
                <div class="hotserach">
                            <div class="t">热门搜索 </div>
                            <div class="b" v-for="item in hotKeywordList " :key=" item.id ">
                                 {{item.keyword}}
                            </div>
                </div>
            <div class="goodslist"  v-if="reslist" >

            <div class="nav-bar">
                    <div class="bar">综合</div>
                    <div class="bar">价格</div>
                    <div class="bar">分类</div>
            </div>
            <div class="list">
                        <div class="list-item">
                                <img :src="reslistarr.list_pic_url" alt="">
                                <p>{{reslistarr.name}}</p>
                                <p>￥{{reslistarr.retail_price}}</p>
                        </div>
            </div>
            </div>
                
                          
                        
</form>
    </div>
</template>

<script>
import {indexaction ,helperaction ,addhistoryaction} from "../../../api/Home/index.js"
    export default {
        data() {
            return {
                value:"",
                hotKeywordList:[],
                historyData:[],
                helpsch:[],
                res:false,
                reslist:false,
                reslistarr:[]
            }
        },
        methods: {
            onSearch(){
                helperaction({
                    keyword:this.value,
                    order:"asc"
                }).then(res=>{
                    console.log(res);
                    this.helpsch = res.keywords
                    if(res.keywords!=0){
                        this.res =true
                    }else{
                        this.res = false
                        this.reslist = false
                    }
                })
            },
            
            onClickLeft(){
                this.$router.go(-1)
            },
            goodsmead(item){
                // 将关键字存储到列表中
                this.res = false
                this.reslist = true
                         var openId = localStorage.getItem("openId")
                            addhistoryaction({
                                keyword:this.value,
                                openId:openId
                            }).then(res=>{
                                console.log(res);
                            })
                            console.log(item);
                            this.reslistarr = item
                          
                           
            }
        },
        created(){
            var openId = localStorage.getItem("openId")
            indexaction({
                   openId:openId
            }).then(res=>{
                console.log(res);
                this.hotKeywordList = res.hotKeywordList
                this.historyData = res.historyData
            })
        }
    }
</script>

<style lang="scss" scoped>
    .history {
        width: 100%;
        // height: 150px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px;
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;;
       
        
        flex-wrap: wrap;;
        .t {
            width: 100%;
            height: 30px;
            margin-bottom: 3px;
            :nth-child(1){
                float: left;
                color: 16px;
                line-height: 30px;
            }
            :nth-child(2){
                display: block;
                width: 30px;
                height: 30px;
                float: right;
                background: url("../../../../images/del-address.png");
                background-size: 100% 100%;
            }
        }
          .b {
                    display: inline-block;
                    height:28px ;
                    color: #333;
                    font-size: 12px;
                    text-align: center;
                    line-height: 28px;
                    border: 1px solid #333;
                    padding: 3px;
                    margin-right:18px ;
                    margin-top: 15px;
                }
    }
    .helpsch {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 100px;
        left: 0;
        li {
            width: 100%;
            height: 35px;
            background-color: #fff;
            line-height: 35px;
            box-sizing: border-box;
            padding: 0px 30px;
            font-size: 14px;
        }
    }
    .hotserach {
        width: 100%;
        height: 140px;
        box-sizing: border-box;
        padding: 10px;
        margin-top: 10px;
        background-color: #fff;
        .t {
            width: 100%;
            
        }
        .b {
          
                    display: inline-block;
                    height:28px ;
                    color: #333;
                    font-size: 12px;
                    text-align: center;
                    line-height: 28px;
                    border: 1px solid #333;
                    padding: 3px;
                    margin-right:18px ;
                    margin-top: 15px;
                
    
        }
    }
    .goodslist{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 100px;
        z-index: 9999;
        background-color: #fff;
        .nav-bar {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
           
            .bar {
                width: 33.33%;
                height: 100%;
                text-align: center;
                line-height: 40px;
                background-color: #fff;
            }
        }
    .list {
            width: 100%;
            margin-top: 5px;
            box-sizing: border-box;
            padding: 5px;
            .list-item {
                width: 187px;
                height: 240px;
                // background-color: red;
                border:  1px solid #d9d9d9;
                img {
                    display: block;
                    width: 151px;
                    height: 151px;
                    margin: 0 auto;
                }
                :nth-child(2){
                    display: block;
                    width: 100%;
                    color: #333;
                    font-size: 14px;
                    text-align: center;
                    
                }
                 :nth-child(3){
                    display: block;
                    width: 100%;
                    color: #b4282d;
                    font-size: 14px;
                    text-align: center;
                    
                }
            }
        }
              
    }
        
</style>